<template>
  <ElFormItem class="fa-widget-source-setting" prop="value" :rules="rules">
    <template #label>
      {{ label }}

      <ElTooltip v-if="enabled" effect="dark" placement="top">
        <div slot="content" class="fa-widget-source-setting__tips">
          1. 手动设置的默认文本内容，参与方可重新修改<br />
          2. 设置自动获取后，将自动获取个人/企业参与方的认证信息，且参与方无法修改
        </div>
        <i class="fa-widget-setting__label-tips fa-icon-info"></i>
      </ElTooltip>

      <ElCheckbox
        class="fa-widget-source-setting__enable-btn"
        v-if="enabled"
        v-model="enable"
        :disabled="disabled"
        label="自动获取"
      />
    </template>

    <ElSelect v-if="enabled && enable" v-model="data.source" popper-class="fa-contract-scope" :disabled="disabled">
      <ElOption v-for="{ key, name } in data.sources" :key="key" :value="key" :label="name" />
    </ElSelect>

    <slot v-else />
  </ElFormItem>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { Widget } from '@/models'

/** 控件来源设置  */
export default defineComponent({
  name: 'FaWidgetSourceSetting',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    },

    /** 默认值 label */
    label: {
      type: String,
      default: '默认文本内容'
    },

    /** 校验规则 */
    rules: {
      type: Array,
      default: () => []
    }
  },

  setup(props) {
    /** 来源是否可用 */
    const enabled = computed(() => !!props.data.sources.length)

    /** 是否设置数据来源 */
    const enable = computed({
      get: () => !!props.data.source,

      set(val) {
        const widget = props.data

        widget.source = val ? widget.sources[0]?.key : undefined
      }
    })

    return {
      /** 来源是否可用 */
      enabled,

      /** 是否设置数据来源 */
      enable
    }
  }
})
</script>

<style lang="scss">
.fa-widget-setting .fa-widget-source-setting {
  &__tips {
    line-height: 1.5;
  }

  &__enable-btn {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    cursor: pointer;

    .el-checkbox__input {
      order: 2;
    }

    .el-checkbox__label {
      order: 1;
      margin-right: 4px;
      padding-left: 0;
    }
  }
}
</style>
